@import "../css/var";

.button {
  font-size: 0.14rem;
  /*display: inline-block;*/
  text-align: center;
  cursor: pointer;
  outline: 0;
  color: #fff;
  padding: 0 .07rem;
  border-radius: 0.05rem;
  min-width: 0.5rem;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.primary {
  border: 1px solid $primary;
  background-color: $primary;
}

.text.primary,
.plain.primary {
  color: $primary;
}

.green {
  border: 1px solid $green;
  background-color: $green;
}

.text.green,
.plain.green {
  color: $green;
}

.blue {
  border: 1px solid $blue;
  background-color: $blue;
}

.text.blue,
.plain.blue {
  color: $blue;
}

.orange {
  border: 1px solid $orange;
  background-color: $orange;
}

.text.orange,
.plain.orange {
  color: $orange;
}

.red {
  border: 1px solid $red;
  background-color: $red;
}

.text.red,
.plain.red {
  color: $red;
}

.gray {
  border: 1px solid $gray;
  background-color: $gray;
}

.text.gray,
.plain.gray {
  color: $gray;
}

.black {
  border: 1px solid $black;
  background-color: $black;
}

.plain.black {
  color: $black;
}

.plain {
  background: transparent;
}

.text {
  border: 0;
  color: $primary;
  background: transparent;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.larger,
.big {
  width: 100%;
  height: 0.4rem;
}

.normal {
  height: 0.35rem;
}

.small {
  height: 0.3rem;
}

.mini {
  height: 0.25rem;
}

.round {
  border-radius: 0.4rem;
}

.loading {
  position: relative;
}

.loading::before {
  font-family: 'iconfont-common', serif;
  content: '\e61f';
  display: inline-block;
  width: 0.18rem;
  height: 0.18rem;
  line-height: 0.18rem;
  text-align: center;
  margin-right: 0.02rem;
  animation: rotate 3s linear infinite;
}

.button:active {
  opacity: 0.7;
}

@keyframes rotate {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}

.button + .button {
  margin-left: .1rem;
}
